:host {
  @apply grid grid-cols-4 gap-4 mt-2;
}

button {
  @apply outline-none transition-all;

  &:not(.selected) {
    @apply duration-0 focus:ring-2 focus:ring-primary;
  }
  &.selected {
    @apply focus:ring-2 focus:ring-offset-primary;
  }
  &:disabled {
    opacity: 0.7;
  }
}

figure {
  @apply transition-all duration-300;
}

.selected {
  @apply border-primary;
  figure {
    filter: drop-shadow(3px 3px 3px rgb(100 116 139 / 80%));
  }
}

.hovered {
  figure {
    filter: drop-shadow(3px 3px 3px rgb(100 116 139 / 80%));
  }
}
